<template>
  <el-dialog
    title="传输列表"
    :visible.sync="showTerDialog"
    width="50%"
    :before-close="handleClose">
    <div v-if="showTerDialog">
      <CommonTable
        v-if="operate === 'selectClient'"
        class="commonTable"
        ref="terTableRef"
        v-loading="isLoading"
        :is-selection="true"
        :is-show-index="true"
        :is-has-opera="false"
        :remote-api="getClientList"
        :query-params="searchObj"
        :t-column-data="terminalListCol"
        :is-reserve-select="true"
        @changeRow="changeRowMethods"
        operating-width="180px"
      >

      </CommonTable>

      <div v-else-if="operate === 'fileList'">
        <template v-for="(item, index) in recordsList">
          <div class="send-file-row">
            <div class="send-file-name">{{item.media_name}}</div>
            <el-progress :percentage="item.send_rate"></el-progress>
          </div>
          <el-divider v-if="index !== recordsList.length - 1"></el-divider>
        </template>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button v-if="operate === 'selectClient'" @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmSendFile">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {terminalListCol} from './tableCol/terminalListCol'
import * as service from './service'
import {getClientList} from '@/views/terminal/service'
import {getSendFileRecord} from "./service";
export default {
  name: "index",
  props: {
    showTerDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isLoading: false,
      terminalListCol,
      getClientList,
      getSendFileRecord,
      searchObj: {

      },
      recordsList: [],
      selectTerList: [],
      operate: 'selectClient',
      // operate: 'fileList',
      timer: null,
      groupList: []
    }
  },
  watch: {
    showTerDialog(val) {
      if(val) {
        this.isLoading = false
        if(this.operate === 'selectClient') {
          this.getList()
        } else if(this.operate === 'fileList') {
          this.timer = setInterval(() => {
            this.getSendRecordList()
          }, 2500)
          this.getSendRecordList()
        }
      } else {
        clearInterval(this.timer)
        this.timer = null
      }
    }
  },
  mounted() {
    this.getGroupList()
  },
  methods: {
    getGroupList() {
      service.getGroupList({page: 1,pageSize: 200000000}).then((res) => {
        this.groupList = [...res.data.records]
      })
    },
    getFileRateList() {
      this.operate = 'fileList'
      this.timer = setInterval(() => {
        this.getSendRecordList()
      }, 2500)
      this.getSendRecordList()
    },
    changeRowMethods(val) {
      this.selectTerList = val
    },
    getList() {
      this.$nextTick(() => {
        this.$refs.terTableRef.queryData({...this.searchObj}, () => {
          this.$refs.terTableRef.dataList.forEach((item) => {
            if(item.group_id) {
              const findIndex = this.groupList.findIndex((result) => {
                return item.group_id == result.id
              })
              if(findIndex !== -1) {
                item.group_name = this.groupList[findIndex].group_name
              }
            }
          })
          this.$refs.terTableRef.dataList.splice(0, 0)
        })
      })
    },
    handleClose() {
      clearInterval(this.timer)
      this.timer = null
      this.operate = 'selectClient'
      this.$emit('on-cancel')
    },
    getSendRecordList() {
      let arr = [1,2]
      const params = {
        page: 1,
        pageSize: 20,
        statusList: arr
      }
      service.getSendFileRecord(params).then((res) => {
        this.recordsList = res.data.records.slice()
      })
    },
    confirmSendFile() {
      if(this.operate === 'selectClient') {
        // 开始分发
        let clientIds = []
        this.selectTerList.forEach((item) => {
          if(this.selectTerList.indexOf(item.id) === -1) {
            if(item.status == 0) {
              this.$message.error(`终端${item.name}已离线`)
            } else {
              clientIds.push(item.id)
            }
          }
        })
        if(clientIds.length > 0) {
          this.isLoading = true
          this.$emit('on-confirm', this.selectTerList)
        }
        // this.operate = 'fileList'
      } else if(this.operate === 'fileList') {
        // this.$emit('on-close', this.selectTerList)
        this.handleClose()
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .send-file-row{
    display: flex;
    margin-top: 25px;
    //padding-bottom: 25px;
    //border-bottom: 1px solid #E4E7ED;
    justify-content: space-between;
    align-items: center;
    .send-file-name{
      width: 220px;
      font-size: 16px;
      font-weight: bold;
    }
    .el-progress{
      width: 60%;
    }
  }
  ::v-deep .el-dialog__body{
    padding: 20px !important;
  }
</style>
